/// CSS Corners
/// @param {List} $shorthand
/// @example
/// //SCSS
/// $shortand:40px 20px solid red;
/// .corners {
///   @include corners($shortand);
/// }
/// //OutPut CSS
/// .corners {
///   border: 20px solid red;
///   clip-path: polygon(0 40px, 0 0, 40px 0, 40px 21px, calc(100% - 40px) 21px, calc(100% - 40px) 0, 100% 0, 100% 40px, calc(100% - #bw - 1px) 40px, calc(100% - #bw - 1px) calc(100% - 40px), 100% calc(100% - 40px), 100% 100%, calc(100% - 40px) 100%, calc(100% - 40px) calc(100% - #bw - 1px), 40px calc(100% - #bw - 1px), 40px 100%, 0 100%, 0 calc(100% - 40px), 21px calc(100% - 40px), 21px 40px);
/// }
/// @author Bennett Feely
/// @link http://codepen.io/bennettfeely/pen/NdVyvR

@mixin corners($shorthand) {
  $cs: nth($shorthand, 1); // corner-size
  $-cs: calc(100% - #{$cs}); // corner-width from ends
  $bw: nth($shorthand, 2); // border-width
  $bs: nth($shorthand, 3); // border-style
  $bc: nth($shorthand, 4); // border-color

  border: $bw $bs $bc;

  $bw: $bw + 1px; // border-width
  $-bw: calc(100% - #{#bw} - 1px); // border-width from ends

  clip-path: polygon(
    0 $cs,
    0 0,
    $cs 0,
    $cs $bw,
    $-cs $bw,
    $-cs 0,
    100% 0,
    100% $cs,
    $-bw $cs,
    $-bw $-cs,
    100% $-cs,
    100% 100%,
    $-cs 100%,
    $-cs $-bw,
    $cs $-bw,
    $cs 100%,
    0 100%,
    0 $-cs,
    $bw $-cs,
    $bw $cs
  );
}
